<!-- @format -->

<script setup>
	import BitPanel from './components/bit-panel.vue'
</script>

<template>
	<h3>折叠面板</h3>

	<!-- 默认插槽的第一种传内容语法：直接在双标签之间包裹内容 -->
	<bit-panel>
		<div class="img-box">
			<img
				src="./assets/lq.png"
				alt="lq" />
			<img
				src="./assets/sy.png"
				alt="sy" />
		</div>
	</bit-panel>

	<!-- 默认插槽的第二种传内容语法：配合 template + v-slot:插槽名  -->

	<bit-panel>
		<!-- 
    template: 也是 Vue 的内置组件，并且也是抽象组件（不会出现在真实DOM树上），它的作用仅仅是提供一个包裹标签的容器
     
    -->
		<template v-slot:default>
			<div class="img-box">
				<img
					src="./assets/lq.png"
					alt="lq" />
				<img
					src="./assets/sy.png"
					alt="sy" />
			</div>
		</template>
	</bit-panel>

	<bit-panel>
		<!-- 
      v-slot: 可以简写成 #，能简写推荐简写

      template 配合 #插槽名 
    -->
		<template #default>
			<div class="img-box">
				<img
					src="./assets/lq.png"
					alt="lq" />
				<img
					src="./assets/sy.png"
					alt="sy" />
			</div>
		</template>
	</bit-panel>
</template>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #ccc;
	}
	#app {
		width: 400px;
		margin: 30px auto;
		padding: 1em 2em 2em;
		background: #fff;
	}
	#app h3 {
		margin-bottom: 20px;
		text-align: center;
	}

	.img-box {
		display: flex;
		flex-direction: column;
		img {
			width: 100%;
		}
	}
</style>
